<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{num}}.{{title}}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"type="text/javascript"charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
    }
    
    html,
    body {
    width: 100%;
    height: 100%;
    }
    
    .container .navbar {
    width: 100%;
    height: 50px;
     background-color: black;
    overflow: hidden;
    }

.container .navbar a {
display: inline-block;
width: 80px;
color: white;
font-size: large;
line-height: 50px;
text-decoration: none;
text-align: center;
}
.container .navbar a:hover {
background-color: green;
}
.container .navbar .login {
float: right;
}
.container .part1 {
    width: 100%;
height: 600px;
overflow: hidden;
}
 .container .part1 .left_desc {
width: 50%;
height: 600px;
float: left;
overflow: scroll;
}

.container .part1 .left_desc h3 {
padding-top: 10px;
 padding-left: 10px;
 }

 .container .part1 .left_desc pre {
 padding-top: 10px;
 padding-left: 10px;
 font-size: medium;
 font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',sans-serif;
 }

 .container .part1 .right_code {
 width: 50%;
 float: right;
 }

 .container .part1 .right_code .ace_editor {
     height: 600px;
 }
 .container .part2 {
 width: 100%;
 overflow: hidden;
}

 .container .part2 .result {
 width: 300px;
 float: left;
 }

 .container .part2 .btn-submit {
 width: 120px;
 height: 50px;
 font-size: large;
 float: right;
 background-color: #26bb9c;
 color: #FFF;
 border: 0px;
 margin-top: 10px;
 margin-right: 10px;
 }
 .container .part2 button:hover {
 color:green;
 }
 .container .part2 .result {
margin-top: 15px;
margin-left: 15px;
}

.container .part2 .result pre {
font-size: large;
}
</style>


<body>
    <div class="container">
    
    <div class="navbar">
    <a href="/">⾸⻚</a>
    <a href="/all_question">题库</a>
    <a href="#">竞赛</a>
    <a href="#">讨论</a>
    <a href="#">求职</a>
    <a class="login" href="#">登录</a>
    </div>
    <div class="part1">
    <div class="left_desc">
    
    <h3><span id="num">{{num}}</span>.{{title}}_{{star}}</h3>
    
    <pre>{{desc}}</pre>
    </div>
    <div class="right_code">
    <pre id="code" class="ace_editor"><textarea class="ace_text-input">
        {{pre_code}}
    </textarea></pre>
    </div>
    </div>
    <div class="part2">
    <div class="result">我是结果</div>
    <button class="btn-submit" onclick="submit()">提交代码</button>
    </div>
    </div>
    

</body>
<script>
    //初始化对象
 editor = ace.edit("code");
 editor.setTheme("ace/theme/monokai");
 editor.session.setMode("ace/mode/c_cpp");

 // 字体⼤⼩
 editor.setFontSize(16);
 // 设置默认制表符的⼤⼩:
 editor.getSession().setTabSize(4);

 // 设置只读（true时只读，⽤于展⽰代码）
 editor.setReadOnly(false);

 // 启⽤提⽰菜单
 ace.require("ace/ext/language_tools");
 editor.setOptions({
 enableBasicAutocompletion: true,
 enableSnippets: true,
 enableLiveAutocompletion: true
 });

 function submit(){
    var code=editor.getSession().getValue();
    // console.log(code);
    var num=$(".container .part1 .left_desc h3 #num").text();
    // console.log(num);
    var judge_url="/judge/"+num;
    // console(judge_url);
    $.ajax({
       method:'Post',
       url:judge_url,
       dataType:'json',
       contentType:'application/json;charset=utf-8',
       data:JSON.stringify({
        'code':code,
        'input':''
       }),
       success:function(data){
      //  console.log(data);
       
        show_result(data);
}
    
 });
}
  // 3. 得到结果，解析并显⽰到 result中
  function show_result(data)
  {
//  console.log(data.status);
//  console.log(data.reason);
//   result结果标签
 var result_div = $(".container .part2 .result");
//   清空上⼀次的运⾏结果
 result_div.empty();

//  状态码和原因结果
 var _status = data.status;
 var _reason = data.reason;

 var reason_lable = $( "<p>",{
 text: _reason
 });
 reason_lable.appendTo(result_div);

 if(status == 0){
 // 成功，是否通过看测试⽤例的
 var _stdout = data.stdout;
 var _stderr = data.stderr;

 var stdout_lable = $("<pre>", {
 text: _stdout
 });

 var stderr_lable = $("<pre>", {
 text: _stderr
})

stdout_lable.appendTo(result_div);
stderr_lable.appendTo(result_div);
}
else{
// 编译运⾏出错
   }
  }

    




</script>
</html>